/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-slider-font-size: var(--spectrum-font-size-75);
    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
    --spectrum-slider-control-height: var(--spectrum-component-height-100);
    --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
    --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
    --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
    --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
    --spectrum-slider-value-inline-size: 18px;
    --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
    --spectrum-slider-min-size: var(--spectrum-spacing-900);
    --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
    --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
    --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
    --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
    --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
    --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size) / 2);
    --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
    --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
    --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
    --spectrum-slider-tick-mark-border-radius: 2px;
    --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
    --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
    --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
    --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
    --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
    --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
    --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
    --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
    --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
    --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
    --spectrum-slider-range-track-reset: 0;
    z-index: 0;
    min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
    -webkit-user-select: none;
    user-select: none;
    display: block;
    position: relative;
}

:host:dir(rtl),
:host([dir="rtl"]) {
    --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}

:host:not(.spectrum-Slider--sideLabel) #label-container + #track:has(.spectrum-Slider-ramp) {
    margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
}

:host([size="s"]) {
    --spectrum-slider-font-size: var(--spectrum-font-size-75);
    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
    --spectrum-slider-control-height: var(--spectrum-component-height-75);
    --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
    --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
    --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
    --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
}

:host([size="l"]) {
    --spectrum-slider-font-size: var(--spectrum-font-size-100);
    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
    --spectrum-slider-control-height: var(--spectrum-component-height-200);
    --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
    --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
    --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
    --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
    --spectrum-slider-value-inline-size: 18px;
}

:host([size="xl"]) {
    --spectrum-slider-font-size: var(--spectrum-font-size-200);
    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
    --spectrum-slider-control-height: var(--spectrum-component-height-300);
    --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
    --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
    --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
    --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
    --spectrum-slider-value-inline-size: 22px;
}

.spectrum-Slider--sideLabel {
    align-items: center;
    display: flex;
}

.spectrum-Slider--sideLabel #label-container {
    margin-block-start: 0;
}

.spectrum-Slider--sideLabel #label-container #label {
    margin-inline-end: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
}

.spectrum-Slider--sideLabel #label-container + #track {
    margin-block-start: 0;
}

.spectrum-Slider--sideLabel #controls {
    margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
}

.spectrum-Slider--sideLabel #value {
    inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
    text-align: start;
    margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
}

#controls {
    box-sizing: border-box;
    cursor: pointer;
    z-index: auto;
    inline-size: calc(100% - var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * 2);
    block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
    vertical-align: top;
    margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
    display: inline-block;
    position: relative;
}

#controls:not(:has(.ticks)) {
    align-items: center;
    display: flex;
}

#label-container + #track {
    margin-block-start: calc(var(--spectrum-slider-control-to-field-label) * -1);
}

:host([tick-labels]) {
    margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
}

.fill,
.track {
    block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
    padding-block: 0;
    padding-inline-start: 0;
    padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
    position: absolute;
    inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
    inset-inline: 0 auto;
}

.fill:before,
.track:before {
    content: "";
    block-size: 100%;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    display: block;
}

.track:first-of-type:before {
    border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
    border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
}

.track:last-of-type:before {
    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
}

.track ~ .track {
    margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
    margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
    padding-block: 0;
    padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
    padding-inline-end: 0;
    inset-inline-start: auto;
    inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
}

:host([variant="range"]) .track ~ .track {
    padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
    margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
    inset-inline: auto;
}

.fill {
    margin-inline-start: 0;
    padding-block: 0;
    padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
    padding-inline-end: 0;
}

.offset {
    padding-block: 0;
    padding-inline-start: 0;
    padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
}

:host([variant="range"]) #value {
    -webkit-user-select: text;
    user-select: text;
}

:host([variant="range"]) .track:first-of-type {
    margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
    padding-inline-start: 0;
    padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
    inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
    inset-inline-end: auto;
}

:host([variant="range"]) .track:first-of-type:before {
    border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
    border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
}

:host([variant="range"]) .track:last-of-type {
    margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
    padding-inline-start: var(--spectrum-slider-track-handleoffset);
    padding-inline-end: 0;
    inset-inline-start: auto;
    inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
}

:host([variant="range"]) .track:last-of-type:before {
    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
}

#ramp {
    block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
    position: absolute;
    inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
    inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
}

#ramp svg {
    inline-size: 100%;
    block-size: 100%;
    transform: var(--spectrum-logical-rotation,);
}

.handle {
    z-index: 2;
    box-sizing: border-box;
    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
    margin-block: 0;
    margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
    border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
    border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
    transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
    border-style: solid;
    outline: none;
    display: inline-block;
    position: absolute;
    inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
    inset-inline-start: 0;
}

.handle.dragging,
.handle:active {
    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
}

.handle.dragging,
.handle.handle-highlight,
.handle.is-tophandle,
.handle:active {
    z-index: 3;
}

.handle:before {
    content: "";
    transition:
        box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
        inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
        block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
    border-radius: 100%;
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
}

:host:dir(rtl) .handle:before,
:host([dir="rtl"]) .handle:before {
    transform: translate(50%, -50%);
}

.handle.handle-highlight:before {
    inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
    block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
}

.input {
    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
    opacity: 0;
    cursor: default;
    appearance: none;
    pointer-events: none;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
    inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
    overflow: hidden;
}

.input:focus {
    outline: none;
}

#label-container {
    inline-size: auto;
    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
    display: flex;
    position: relative;
}

#label-container:lang(ja),
#label-container:lang(ko),
#label-container:lang(zh) {
    line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
}

#label {
    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
    padding-inline-start: 0;
}

#value {
    cursor: default;
    font-feature-settings: "tnum";
    text-align: end;
    flex-grow: 0;
    margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
    padding-inline-end: 0;
}

:host([variant="tick"]) .handle {
    background-color: var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color));
}

:host([variant="tick"]) #controls {
    margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2);
}

:host([variant="tick"]) .tickLabel {
    margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75));
}

.ticks {
    z-index: 0;
    margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
    justify-content: space-between;
    display: flex;
}

.ticks ~ .handleContainer .handle {
    background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
}

.tick {
    position: relative;
    inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2);
}

.tick,
.tick:after {
    inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
}

.tick:after {
    content: "";
    block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
    border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% - var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2);
}

.tick .tickLabel {
    font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
    color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color)));
    justify-content: center;
    align-items: center;
    display: flex;
}

.tick:first-of-type .tickLabel,
.tick:last-of-type .tickLabel {
    margin-inline: 0;
    display: block;
    position: absolute;
}

.tick:first-of-type {
    inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
}

.tick:first-of-type .tickLabel {
    inset-inline-start: 0;
}

.tick:last-of-type {
    inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
}

.tick:last-of-type .tickLabel {
    inset-inline-end: 0;
}

.handleContainer,
.trackContainer {
    inline-size: calc(100% + var(--spectrum-slider-handle-size));
    margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
    position: absolute;
    inset-block-start: 0;
}

.trackContainer {
    block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
    overflow: hidden;
}

.track:before {
    background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
}

.track ~ .track:before {
    border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
    border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
}

.track:not(:has(~ .spectrum-Slider-fill)):before {
    background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
}

#label-container {
    color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
}

:host([variant="filled"]) .track:first-child:before,
.fill:before {
    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
}

#ramp path {
    fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
}

.handle {
    border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
}

.handle.handle-highlight {
    border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
}

.handle.handle-highlight:before {
    box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
}

.handle.dragging,
.handle:active {
    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
}

:host([variant="ramp"]) .handle {
    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
    background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
}

.input {
    background: none;
}

.tick:after {
    background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
}

.handle.dragging {
    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
}

:host([variant="range"]) .track:not(:first-of-type, :last-of-type):before {
    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

:host([disabled]),
:host([disabled]) #controls {
    cursor: default;
}

:host([disabled]) #label-container,
:host([disabled]) .tickLabel {
    color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
}

:host([disabled]) .handle {
    border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
    background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
    cursor: default;
    pointer-events: none;
}

:host([disabled]) .handle:active {
    border-color: var(--mod-disabled-border-color, var(--spectrum-disabled-border-color));
    background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
}

@media (hover: hover) {
    .handle:hover {
        border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
    }

    :host([disabled]) .handle:hover {
        border-color: var(--mod-disabled-border-color, var(--spectrum-disabled-border-color));
        background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
    }
}

:host([disabled]) .track:before {
    background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
}

:host([disabled]) .fill:before,
:host([disabled][variant="filled"]) .track:first-child:before {
    background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
}

:host([disabled]) #ramp path {
    fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
}

:host([disabled]) .tick:after {
    background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
}

:host([disabled][variant="range"]) .track:not(:first-of-type, :last-of-type):before {
    background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
}

@media (forced-colors: active) {
    :host {
        --highcontrast-slider-track-color: ButtonText;
        --highcontrast-slider-track-color-disabled: GrayText;
        --highcontrast-slider-track-color-static: ButtonText;
        --highcontrast-slider-track-fill-color-disabled: GrayText;
        --highcontrast-slider-filled-track-fill-color: Highlight;
        --highcontrast-slider-ramp-track-color: ButtonText;
        --highcontrast-slider-ramp-track-color-disabled: GrayText;
        --highcontrast-slider-tick-mark-color: ButtonText;
        --highcontrast-slider-tick-mark-color-disabled: GrayText;
        --highcontrast-slider-handle-border-color: ButtonText;
        --highcontrast-slider-handle-border-color-hover: Highlight;
        --highcontrast-slider-handle-border-color-down: Highlight;
        --highcontrast-slider-handle-border-color-key-focus: Highlight;
        --highcontrast-slider-handle-border-color-disabled: GrayText;
        --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
        --highcontrast-slider-handle-background-color: ButtonFace;
        --highcontrast-slider-handle-background-color-disabled: GrayText;
        --highcontrast-slider-handle-disabled-background-color: GrayText;
        --highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
        --highcontrast-slider-ramp-handle-background-color: ButtonFace;
        --highcontrast-slider-label-text-color: CanvasText;
        --highcontrast-slider-label-text-color-disabled: GrayText;
    }

    .handle.handle-highlight:before,
    :host([variant="ramp"]) .handle {
        forced-color-adjust: none;
    }

    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls.handle-highlight,
    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:active,
    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:focus-within {
        --highcontrast-slider-track-color: Highlight;
        --highcontrast-slider-handle-border-color: Highlight;
        --highcontrast-slider-ramp-track-color: Highlight;
        --highcontrast-slider-tick-mark-color: Highlight;
    }

    @media (hover: hover) {
        :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:hover {
            --highcontrast-slider-track-color: Highlight;
            --highcontrast-slider-handle-border-color: Highlight;
            --highcontrast-slider-ramp-track-color: Highlight;
            --highcontrast-slider-tick-mark-color: Highlight;
        }
    }

    :host([disabled]) #ramp + .handle {
        fill: ButtonFace;
        background-color: ButtonFace;
    }
}
